<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/9257">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<form>
  <fieldset>
    <input type=email>
    <input type=submit>
  </fieldset>
</form>

<script>
promise_test(async () => {
  const form = document.querySelector('form');
  const fieldset = document.querySelector('fieldset');
  const input = document.querySelector('input[type=email]');

  assert_false(form.matches(':invalid'), 'form should not initially match :invalid.');
  assert_true(form.matches(':valid'), 'form should initialy match :valid.');
  assert_false(form.matches(':user-valid'), 'initial state: form should never match :user-valid.');
  assert_false(form.matches(':user-invalid'), 'initial state: form should never match :user-invalid.');

  assert_false(fieldset.matches(':invalid'), 'fieldset should not initially match :invalid.');
  assert_true(fieldset.matches(':valid'), 'fieldset should initialy match :valid.');
  assert_false(fieldset.matches(':user-valid'), 'initial state: fieldset should never match :user-valid.');
  assert_false(fieldset.matches(':user-invalid'), 'initial state: fieldset should never match :user-invalid.');

  assert_false(input.matches(':invalid'), 'input should not initially match :invalid.');
  assert_true(input.matches(':valid'), 'input should initialy match :valid.');
  assert_false(input.matches(':user-valid'), 'input should not initialy match :user-valid.');
  assert_false(input.matches(':user-invalid'), 'input should not initialy match :user-invalid.');

  await test_driver.click(input);
  await test_driver.send_keys(input, 'user');
  input.blur();

  assert_true(form.matches(':invalid'), 'form should match :invalid after invalid text was entered.');
  assert_false(form.matches(':valid'), 'form should not match :valid after invalid text was entered.');
  assert_false(form.matches(':user-valid'), 'after text was entered: form should never match :user-valid.');
  assert_false(form.matches(':user-invalid'), 'after text was entered: form should never match :user-invalid.');

  assert_true(fieldset.matches(':invalid'), 'fieldset should match :invalid after invalid text was entered.');
  assert_false(fieldset.matches(':valid'), 'fieldset should not match :valid after invalid text was entered.');
  assert_false(fieldset.matches(':user-valid'), 'after invalid text was entered: fieldset should never match :user-valid.');
  assert_false(fieldset.matches(':user-invalid'), 'after ininvalid text was entered: fieldset should never match :user-invalid.');

  assert_true(input.matches(':invalid'), 'input should match :invalid after invalid text was entered.');
  assert_false(input.matches(':valid'), 'input should not match :valid after invalid text was entered.');
  assert_false(input.matches(':user-valid'), 'input should not match :user-valid after invalid text was entered.');
  assert_true(input.matches(':user-invalid'), 'input should match :user-invalid after invalid text was entered.');

  await test_driver.click(input);
  await test_driver.send_keys(input, '@example.com');
  await input.blur();

  assert_false(form.matches(':invalid'), 'form should not match :invalid after valid text was entered.');
  assert_true(form.matches(':valid'), 'form should match :valid after valid text was entered.');
  assert_false(form.matches(':user-valid'), 'after valid text was entered: form should never match :user-valid.');
  assert_false(form.matches(':user-invalid'), 'after invalid text was entered: form should never match :user-invalid.');

  assert_false(fieldset.matches(':invalid'), 'fieldset should not match :invalid after valid text was entered.');
  assert_true(fieldset.matches(':valid'), 'fieldset should match :valid after valid text was entered.');
  assert_false(fieldset.matches(':user-valid'), 'after valid text was entered: fieldset should never match :user-valid.');
  assert_false(fieldset.matches(':user-invalid'), 'after invalid text was entered: fieldset should never match :user-invalid.');

  assert_false(input.matches(':invalid'), 'input should not match :invalid after valid text was entered.');
  assert_true(input.matches(':valid'), 'input should match :valid after valid text was entered.');
  assert_true(input.matches(':user-valid'), 'input should match :user-valid after valid text was entered.');
  assert_false(input.matches(':user-invalid'), 'input should not match :user-invalid after invalid text was entered.');
}, 'form and fieldset elements should match :valid/:invalid but not :user-valid/:user-invalid.');
</script>
